<template>
  <div class="card-school">
    <div class="school__head">
      <template v-if="link">
        <component
          :is="getLinkComponent(link).tag"
          v-bind="getLinkComponent(link).props"
          class="school__img img-fit"
        >
          <img :src="image" :alt="alt" />
        </component>
      </template>
      <div v-else class="school__img img-fit">
        <img :src="image" :alt="alt" />
      </div>
      <div v-if="watermark" class="school__watermark">
        <img :src="watermark" :alt="alt" />
      </div>
    </div>
    <div class="school__body">
      <ul class="school__cat-list" v-if="catList && catList.length > 0">
        <li
          v-for="cat in catList"
          :key="cat"
          class="tx-overline text-blue"
        >
          {{ cat }}
        </li>
      </ul>
      <h6 class="school__title" v-if="title">{{ title }}</h6>
      <div class="school__content" v-if="text" v-html="text"></div>
      <ul class="school__cta">
        <li v-if="phone">
          <a
            class="school__cta__item link-body-p link--udrline"
            :href="`tel:${phone}`"
          >{{ phone }}</a>
        </li>
        <li v-if="email">
          <a
            class="school__cta__item link-body-p link--udrline"
            :href="`mailto:${email}`"
          >{{ email }}</a>
        </li>
      </ul>
      <div class="contact__link mt-3" v-if="link">
        <Button
          type="link"
          :data="{
            text: linkText || '访问学校网页',
            url: link,
          }"
          @handleClick="handleClick"
        />
      </div>
      <div class="contact__link mt-3" v-if="buttons">
        <Button
          v-for="(btn, idx) in buttons"
          :key="idx"
          type="button"
          :data="{
            text: btn.text,
            url: btn.url
          }"
          @handleClick="handleClick"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Button from '@/common/Button/index.vue'

defineOptions({
  name: 'CardSchool'
})

interface Props {
  componentProps?: {
    image?: string
    photo_url?: string
    cat?: string[]
    tags?: string[]
    title?: string
    name?: string
    text?: string
    description?: string
    watermark?: string
    phone?: string
    email?: string
    link?: string
    website?: string
    linkText?: string
    buttons?: any[]
    alt?: string
  }
}

const props = withDefaults(defineProps<Props>(), {
  componentProps: () => ({})
})
const emit = defineEmits(['handleClick'])

const image = computed(() =>
  props.componentProps?.image || props.componentProps?.photo_url
)
const catList = computed(() =>
  props.componentProps?.cat || props.componentProps?.tags
)
const title = computed(() =>
  props.componentProps?.title || props.componentProps?.name
)
const text = computed(() =>
  props.componentProps?.text || props.componentProps?.description
)
const watermark = computed(() => props.componentProps?.watermark ?? null)
const phone = computed(() => props.componentProps?.phone ?? null)
const email = computed(() => props.componentProps?.email ?? null)
const link = computed(() =>
  props.componentProps?.link || props.componentProps?.website
)
const linkText = computed(() => props.componentProps?.linkText)
const buttons = computed(() => props.componentProps?.buttons ?? null)
const alt = computed(() => props.componentProps?.alt || title.value)

const getLinkComponent = (link: string) => {
  if (link?.startsWith('http')) {
    return {
      tag: 'a',
      props: {
        href: link,
        target: '_blank',
        rel: 'noopener noreferrer'
      }
    }
  }
  return {
    tag: 'a',
    props: {
      href: link
    }
  }
}

const handleClick = (url: string) => {
  emit('handleClick', url)
}
</script>

<style lang="scss" scoped>
.img-fit {
  width: 100%;
}

.img-fit .img,.img-fit img {
  width: 100%;
  height: auto;
}

a {
  font-size: 16px;
  color: #0d6efd;
  text-decoration: underline;
}

.tx-h6,h6 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.33
}

@media(max-width: 1023.98px) {
  .tx-h6,h6 {
    font-size:16px;
    line-height: 1.25;
    letter-spacing: .01em
  }
}

@media(max-width: 767.98px) {
  .tx-h6,h6 {
    line-height:1.5
  }
}

.text-blue {
  --bs-text-opacity: 1;
  color: rgba(0,72,232,var(--bs-text-opacity))!important;
}

.tx-overline {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.285;
  letter-spacing: .06em;
  text-transform: uppercase
}

@media(max-width: 1023.98px) {
  .tx-overline {
      font-size:13px;
      line-height: 1
  }
}

@media(max-width: 767.98px) {
  .tx-overline {
      line-height:1.166
  }
}

.link-body-p {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: #0048e8;
  color: var(--text-color,#0048e8)
}

.link-body-p:hover {
  color: #0048e8;
  color: var(--text-color,#0048e8)
}

.link-body-p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  --text-color: #0048e8
}

@media(max-width: 1023.98px) {
  .link-body-p {
      font-size:14px;
      line-height: 1.714;
      letter-spacing: .01em
  }
}

.link-body-p.link--udrline:after {
  transform: scaleX(0) translateY(-.22em)
}

.link-body-p.link--udrline:hover:after {
  transform: scaleX(1) translateY(-.22em)
}

.link--udrline {
  flex-direction: column
}

.link--udrline--active:after,.link--udrline:focus:after,.link--udrline:hover:after {
  transform: scaleX(1)
}

.link--udrline:after {
  content: "";
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #0048e8;
  background-color: var(--text-color,#0048e8);
  transform: scaleX(0);
  transition: all .3s ease-in-out
}

.mt-3 {
  margin-top: 12px!important
}

.card-school .school__head {
  position: relative;
}

.card-school .school__head .school__img {
  display: inline-block;
}

.card-school .school__head .school__watermark {
  position: absolute;
  height: 60px;
  width: 35px;
  top: 12px;
  right: 15.19px;
}

@media (max-width: 767.98px) {
  .card-school .school__head .school__watermark {
    top: 13px;
    right: 8px;
  }
}

.card-school .school__head .school__watermark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-school .school__body .school__cat-list {
  display: flex;
  align-items: center;
  margin-top: 16px;
}

.card-school .school__body .school__cat-list li {
  display: flex;
  align-items: center;
}

.card-school .school__body .school__cat-list li:not(:last-child) {
  margin-right: 16px;
}

.card-school .school__body .school__title {
  color: #0032A0;
  margin-top: 8px;
}

@media (max-width: 767.98px) {
  .card-school .school__body .school__title {
    font-size: 28px;
    line-height: 1.29;
    font-weight: 700;
    margin-top: 12px;
  }
}

.card-school .school__body .school__content,
.card-school .school__body .school__content :deep(p) {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #006666;
  margin-top: 12px;
}

@media (max-width: 767.98px) {
  .card-school .school__body .school__content,
  .card-school .school__body .school__content :deep(p) {
    color: #1a1c20;
  }
}

.card-school .school__body .school__cta {
  display: flex;
  align-items: center;
  padding-left: 2.5px;
  margin-top: 8px;
}

@media (max-width: 767.98px) {
  .card-school .school__body .school__cta {
    margin-top: 4px;
  }
}

.card-school .school__body .school__cta li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-school .school__body .school__cta li:not(:last-child) .school__cta__item {
  margin-right: 14.5px;
}

.card-school .school__body .school__cta li:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 17px;
  background-color: #D2D6DC;
}

.card-school .school__body .school__cta li:not(:first-child) .school__cta__item {
  margin-left: 12px;
}

.card-school .school__body .school__link {
  margin-top: 12px;
  display: flex;
}

.card-school .school__body .school__link > *:not(:first-child) {
  margin-left: 40px;
}

@media (max-width: 767.98px) {
  .card-school .school__body .school__link > *:not(:first-child) {
    margin-left: 16px;
  }
}
</style>
